<script lang="ts">
import {defineComponent, h, PropType} from 'vue'

export default defineComponent({
  name: "ShowColor",
  props: {
    color: {
      type: String,
      required: true
    },
    border: {
      type: Boolean,
      default: true
    },
    size: {
      type: String as PropType<"default" | "small" | "large">,
      default: "default"
    },
  },
  setup(props) {
    return () => {
      if (props.color) {
        return h('span', {
          class: [
            `show-color`,
            `show-color-size-${props.size}`,
            `color-border-${props.border ? 'show' : 'none'}`
          ],
          style: {backgroundColor: props.color}
        }, [])
      } else {
        return ''
      }
    }
  }
})
</script>
<style lang="scss" scoped>
.show-color {
  display: inline-block;
  border: 2px solid var(--el-color-primary-light-5);
  border-radius: 4px;
  margin: 0;
  padding: 0;

  &.color-border-none {
    border: none;
  }

  &-size {
    &-small {
      width: 15px;
      height: 15px;
    }

    &-default {
      width: 20px;
      height: 20px;
    }

    &-large {
      width: 25px;
      height: 25px;
    }
  }
}
</style>